<template>
	<el-dialog v-model="dialogVisible" :title="getDialogTitle()" width="600px" :before-close="handleClose">
		<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
			<el-form-item label="订单号">
				<el-input v-model="formData.ordernum" disabled></el-input>
			</el-form-item>
			<el-form-item label="异常类型">
				<el-tag :type="getTypeTagType(formData.type)">
					{{getTypeName(formData.type)}}
				</el-tag>
			</el-form-item>
			<el-form-item label="反馈内容">
				<el-input v-model="formData.content" type="textarea" :rows="3" disabled></el-input>
			</el-form-item>
			<el-form-item label="回复内容" prop="handle_result">
				<el-input v-model="formData.handle_result" type="textarea" :rows="4" 
					:placeholder="getPlaceholder()"></el-input>
			</el-form-item>
			<el-form-item label="处理状态" prop="status" v-if="formData.currentStatus < 3">
				<el-radio-group v-model="formData.status">
					<el-radio :label="1" v-if="formData.currentStatus == 0">未回复</el-radio>
					<el-radio :label="2" v-if="formData.currentStatus == 1">已回复</el-radio>
					<el-radio :label="3" v-if="formData.currentStatus == 2">已完结</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="handleClose">取消</el-button>
				<el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		name: 'aftersalesHandle',
		data() {
			return {
				dialogVisible: false,
				loading: false,
				formData: {
					id: '',
					ordernum: '',
					type: '',
					content: '',
					handle_result: '',
					status: 1,
					currentStatus: 0
				},
				rules: {
					handle_result: [
						{ required: true, message: '请输入回复内容', trigger: 'blur' }
					],
					status: [
						{ required: true, message: '请选择处理状态', trigger: 'change' }
					]
				},
				typeOptions: [] // 异常类型选项
			}
		},
		mounted() {
			this.getTypeOptions()
		},
		methods: {
			// 获取异常类型选项
			async getTypeOptions() {
				try {
					const res = await this.$API.aftersales.aftersales.secondType.get()
					if (res.code === 200) {
						this.typeOptions = res.data
					}
				} catch (error) {
					console.error('获取异常类型失败:', error)
				}
			},
			
			// 获取异常类型名称
			getTypeName(type) {
				const typeItem = this.typeOptions.find(item => item.type === type)
				return typeItem ? typeItem.name : '未知类型'
			},
			
			// 获取异常类型标签类型
			getTypeTagType(type) {
				// 根据异常类型返回不同的标签颜色
				if ([1, 16, 17, 18, 20].includes(type)) {
					return 'info'    // 催取件、催物流、催派送、更改收件信息、核实退回原因
				} else if ([4, 7, 12, 14, 15, 19].includes(type)) {
					return 'warning' // 重量异常、线下收费、签收未收到货、少件、错件、拦截退回
				} else if ([5, 10, 11].includes(type)) {
					return 'danger'  // 虚假揽收、破损、遗失
				} else if (type === 13) {
					return 'info'    // 服务态度差
				} else {
					return 'info'    // 默认
				}
			},
			
			// 获取弹窗标题
			getDialogTitle() {
				const statusMap = {
					0: '受理工单',
					1: '回复工单',
					2: '完结工单',
					3: '查看工单'
				}
				return statusMap[this.formData.currentStatus] || '处理工单'
			},
			
			// 获取输入框占位符
			getPlaceholder() {
				const placeholderMap = {
					0: '请输入受理说明',
					1: '请输入回复内容',
					2: '请输入完结说明',
					3: '请输入备注'
				}
				return placeholderMap[this.formData.currentStatus] || '请输入内容'
			},
			
			// 打开弹窗
			open() {
				this.dialogVisible = true
				return this
			},
			
			// 设置数据
			setData(data) {
				this.formData = {
					id: data.id,
					ordernum: data.ordernum,
					type: data.type,
					content: data.content,
					handle_result: '',
					status: data.status + 1, // 下一个状态
					currentStatus: data.status
				}
				return this
			},
			
			// 提交处理
			handleSubmit() {
				this.$refs.formRef.validate(async (valid) => {
					if (valid) {
						// 二次验证
						try {
							await this.$confirm('确定要回复此工单吗？', '确认操作', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							})
							
							this.loading = true
							
							// 调用回复接口
							const res = await this.$API.aftersales.aftersales.reply.post({
								id: this.formData.id,
								content: this.formData.handle_result
							})
							
							if (res.code === 200) {
								this.$message.success('回复成功')
								this.$emit('success', this.formData, 'reply')
								this.handleClose()
							} else {
								this.$message.error(res.msg || '回复失败')
							}
						} catch (error) {
							if (error !== 'cancel') {
								console.error('回复失败:', error)
								this.$message.error('回复失败')
							}
						} finally {
							this.loading = false
						}
					}
				})
			},
			
			// 关闭弹窗
			handleClose() {
				this.dialogVisible = false
				this.$emit('closed')
				// 重置表单
				this.$nextTick(() => {
					if (this.$refs.formRef) {
						this.$refs.formRef.resetFields()
					}
				})
			}
		}
	}
</script>

<style>
</style>
